
let green = document.querySelector('.green');
let yellow = document.querySelector('.yellow');
let red = document.querySelector('.red');
let box = document.querySelector('.box');
let li = document.querySelectorAll('li')
green.style.backgroundColor = 'green';
// console.log(box);
box.onclick = function () {
    setInterval(function () {
        // li.forEach(function () {
        if (green.style.backgroundColor == 'green') {

            // setInterval(function(){
            yellow.style.backgroundColor = 'yellow';
            green.style.backgroundColor = '';

            // },3000);

        } else if (yellow.style.backgroundColor == 'yellow') {
            red.style.backgroundColor = 'red';
            yellow.style.backgroundColor = '';
        } else if (red.style.backgroundColor == 'red') {
            green.style.backgroundColor = 'green';
            red.style.backgroundColor = '';
        }

    }, 1000);
    // });
}
    // box.onclick = function () {
    //     console.log(green.style.backgroundColor);
    //     if (green.style.backgroundColor = 'green') {
    //         // yellow.style.backgroundColor='yellow';
    //     }
    // }

